    <template>
		<view class="main-class">
			<tn-sticky>
				<view class="header-class tn-flex justify-end" >
					<view class="status_bar" style="height: var(--status-bar-height); width: 100%; "></view>			
					<view class="navbar-class tn-pb">
						<tn-navbar  height="45px" home-icon=""  :bottom-shadow = "false" bg-color="tn-type-primary_bg" > 客户应收明细 </tn-navbar>
					</view>
				</view>
			</tn-sticky>
		<!-- <view class="tn-pt-xl tn-flex justify-between tn-pl-sm tn-pr-sm">
			<view class="tn-w-1-4 ">
				<tn-input v-model="head.con" placeholder="人员名称"  size = "sm"/>
			</view>
			<view class="tn-w-1-4 " @click="openCalendarPopup">
				<tn-input v-model="head.startDate" placeholder="开始日期"  readonly size = "sm" />
			</view >
			<view class="tn-w-1-4 "  @click="openCalendarPopup">
				<tn-input v-model="head.endDate" placeholder="结束日期"  readonly size = "sm" />
			</view>
			<tn-icon name="search" class="tn-pl-sm tn-pr-sm" @click="doGetOneTableData"/>
		</view>	 -->
        <view class="tn-pt-xl">
            <!-- height 单元格高度  border 是否带有纵向边框 type值为type="selection" 时开启多选 loading显示加载中(默认false) emptyText 空数据时显示的文本内容-->
            <th-table :column="twoTableHead" :listData="twoTableData"  :tdClick="clickRow" height="0.5" :border="true" :loading="false" >
            </th-table>
        </view>
		</view>
		
		
    </template>


<script setup>
	
	// 自定义插槽单元格点击事件

	import { ref,reactive,onMounted } from 'vue'
	import { postCall } from '@/api/index.js'
	import dayjs from "dayjs";
	const procName = "PROC_APP_DO_CLIENT_AR_REPORT";
	
	import { createParams } from '@/utils/utils.js'
	
	
	
	onMounted(()=>{
		
		doGetTwoTableHead();
		doGetTwoTableData();
		
	})
	
	
	
	
	const twoTableHead = reactive([]);
	const twoTableData = reactive([]);
	
	const showCalendarPopup = ref(false);
	
	const selectDate = ref('')

	

	
	let doGetTwoTableHead = () =>{
		let params = {};
		params["P_ACTION"] = "TWO_TABLE_HEAD";
		params["P_PROC_NAME"] = procName;
		postCall(params).then(res=>{
			Object.assign(twoTableHead,res.data.DATASET);
		})
	}
	let doGetTwoTableData = () =>{
		// console.log("==");
		// let params = {};
		// params["P_ACTION"] = "TWO_TABLE_DATA";
		// params["P_PROC_NAME"] = procName;
		// postCall(Object.assign(uni.getStorageSync("REPROT"),params) ).then(res=>{
		// 	Object.assign(twoTableData,res.data.DATASET);
		// })
		
		uni.getStorage({
		    key: 'REPORT',
		    success: function (res) {
				twoTableData.length = 0;
		        // console.log(res);
				let params = {};
				params["P_ACTION"] = "TWO_TABLE_DATA";
				params["P_PROC_NAME"] = procName;
				postCall(Object.assign(res.data,params) ).then(res=>{
					if(res){
						Object.assign(twoTableData,res.data.DATASET);
					}
					
				})
		    }
		});
		
	}
	
	const clickRow = (row) =>{
		uni.setStorageSync("REPORT",Object.assign( createParams(row)));		
		uni.navigateTo({
			url: '/pages/report/clientArReportDetailDetail'
		});
	}

	
</script>


<style scoped>
	.table-class{
		overflow-x: scroll;
	}
	.header-class{
		height: 17vh !important;
		flex-direction: column
	}
	.form-class{
		width: 90vw;
		margin-left: 5vw;
	}
	.button-class{
		margin-top: 5vh;
		width: 90vw;
		border-radius: 40px !important;
		/* color: #FFFFFF !important; */
		background: linear-gradient(to right,  #47e8be,#3379dc);
		/* border: 0px solid rgba(0, 0, 0, 0.2) !important; */
		color: #FFFFFF;
	}
	
	.button-class::after{
		border: 0px solid rgba(0, 0, 0, 0.2) !important;
	}
	
	.navbar-class{
		font-size: 20px;
		color: #FFFFFF;
	}
</style> 

